<template>
    <view class="custom-navbar">
        <view class="navbar-left" @click="goBack">
            <text class="navbar-back">←</text>
        </view>
        <view class="navbar-title">
            <text class="navbar-title-text">{{ title }}</text>
        </view>
        <view class="navbar-right">
            <text class="navbar-right-text">{{ rightText }}</text>
        </view>
    </view>
</template>

<script>
import { ref, onMounted } from 'vue';
export default {
    name: 'NavbarComponent',
    props: {
        // 导航栏标题
        title: {
            type: String,
            default: ''
        },
        // 导航栏右侧文本
        rightText: {
            type: String,
            default: ''
        }
    },
    emits: ['goBack'],
    setup(props, { emit }) {
        const title = ref(props.title);
        const rightText = ref(props.rightText);
        const goBack = () => {
            emit('goBack');
        };
        return {
            title,
            rightText,
            goBack
        }
    },
}
</script>

<style lang="scss" scoped>
/* 自定义导航栏样式 - 使用uni.scss中的变量 */
.custom-navbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: $navbar-height !important;
    background-color: $navbar-bg-color !important;
    color: $navbar-text-color !important;
    padding: $navbar-padding !important;
    z-index: 1000 !important;
}

.navbar-left {
    width: 60px !important;
    display: flex !important;
    align-items: center !important;
}

.navbar-back {
    font-size: 20px !important;
    font-weight: bold !important;
    color: $navbar-text-color !important;
}

.navbar-title {
    flex: 1 !important;
    text-align: center !important;
}

.navbar-title-text {
    font-size: 16px !important;
    font-weight: bold !important;
    color: $navbar-text-color !important;
}

.navbar-right {
    width: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.navbar-right-text {
    font-size: 14px !important;
    color: $navbar-text-color !important;
}
</style>
